<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    >
      <el-button v-if="meta.indexOf('RegistrationExport') > -1" slot="btns" :loading="exportLoading" type="primary" @click="exportExcel">{{ $t('message.daochu') }}</el-button>
    </QueryForm>
    <div v-if="tjList && tjList.length > 0" class="total_wraps">
      <div class="first item">
        <div class="key">{{ $t('message.shanxuan') }}</div>
        <div class="key">{{ $t('message.heji') }}</div>
      </div>
      <div class="item_list">
        <div v-for="(item, i) in tjList" :key="i" class="item">
          <div class="key">{{ item.name }}</div>
          <div class="value">
            <!-- <span>{{ $t('message.rmbfh') }}</span> -->
            <span class="price">{{ item.value }}</span>
          </div>
        </div>
      </div>
      <!-- <el-tooltip effect="dark" placement="left">
        <div class="jesm">
          <img
            style="width: 15px; marginright: 2px"
            src="@/assets/icon/question.png"
            alt=""
          >{{ $t('message.jesm') }}
        </div>
        <div slot="content" v-html="smTip" />
      </el-tooltip> -->
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.ddh')"
        min-width="220"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="ckxqBtn" @click="handleDetail(scope.row.activityOrderId)">{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.yhxx')"
        width="250"
        prop="memberInfo"
      />
      <el-table-column
        align="center"
        :label="$t('message.hdname')"
        prop="activityName"
        width="200"
      />
      <el-table-column
        align="center"
        :label="$t('message.bmsj')"
        prop="applyTime"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="$t('message.zfje')"
        prop="price"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="$t('message.zffs')"
        min-width="200"
      >
        <template slot-scope="scope">
          {{
            nameWithPayMethod(scope.row.payMethod)
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.paytime')"
        prop="payTime"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="$t('message.status')"
        fixed="right"
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.statusName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" :width="$i18n.locale === 'ZH'? 140 : 230" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.status == 3 && meta.indexOf('RegistrationRefund') > -1"
              v-preventReClick
              type="text"
              @click="refundOrder(scope.row.orderId)"
            >{{ $t('message.tk') }}</el-button>
            <el-button
              v-if="scope.row.status == 3"
              v-preventReClick
              type="text"
              @click="printTC(scope.row.orderId)"
            >{{ $t('message.dyxp') }}</el-button>
            <span v-if="scope.row.status != 3">-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <orderDetail ref="orderDetail" />
    <VerificationTem ref="VerificationTemRef" />
  </div>
</template>

<script>

import { listActivity, activityOrder, activityOrderRefund, allConfigList, activityExport, printOrder } from '@/api'
import { parseTime } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
import orderDetail from './orderDetail'
import VerificationTem from '@/components/printTem/verification.vue'
export default {
  name: 'Registration',
  components: {
    QueryForm,
    orderDetail,
    VerificationTem
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [
          {
            filed: 'orderId',
            type: 'input',
            label: this.$t('message.ddbh')
          },
          {
            filed: 'memberInfo',
            type: 'input',
            label: this.$t('message.memberInfo'),
            clearable: true
          }, {
            filed: 'activityId',
            type: 'select',
            label: this.$t('message.hd'),
            clearable: true,
            options: []
          }],
        online: true
      },
      activitylist: [],
      list: [],
      meta: [],
      totalCount: 0,
      listLoading: true,
      exportLoading: false,
      tjList: [],
      smTip: '',
      pagination: {
        page: 1,
        rows: 10
      },
      allPayMethedList: [],
      filters: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.pdgj()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    handleDetail(id) {
      this.$refs.orderDetail.getTicketOrderDetail(id)
    },
    exportExcel() {
      this.exportLoading = true
      const { filters } = this
      activityExport({
        param: { ...filters, venueId: sessionStorage.getItem('venueId') }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    printTC(id) {
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem('venueId'),
          workId: id,
          templateCode: 'ACTIVITYTPML'
        }
      })
        .then(res => {
          if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
            res.record.dataList.forEach(item => {
              this.$refs.VerificationTemRef.obj = { ...item, isHddd: 1 }
              setTimeout(() => {
                this.$refs.VerificationTemRef.print()
              })
            }, 300)
          } else {
            this.$message.success(this.$t('message.dycg'))
          }
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    pdgj() {
      allConfigList({ param: { type: '2', code: '1' }}).then(res => {
        if (res.errorCode !== '000000') return
        this.allPayMethedList = res.recordList
        this.getList(1)
        this.getActivtyList()
      }).catch(() => {})
    },
    nameWithPayMethod(payM) {
      const obj = this.allPayMethedList.find(item => item.value === payM)
      if (obj) {
        return obj.name
      } else {
        return '-'
      }
    },
    getActivtyList() {
      listActivity({
        param: {
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.name
            e.value = e.id
          })
          this.activitylist = arr
          this.queryFormConfig.formItems[2].options = arr
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getList(page) {
      this.listLoading = true
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      activityOrder({ pagination, param: { venueId, ...filters }})
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.totalCount = res.totalCount
          this.list = res.recordList
          const tjList = res.data
          if (tjList) {
            let smTip = ''
            tjList.forEach(s => {
              smTip = smTip + s.tip + '<br />'
            })
            this.tjList = tjList
            this.smTip = smTip
          }
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    refundOrder(orderId) {
      const that = this
      this.$confirm(this.$t('message.tktcqr'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          activityOrderRefund({ param: { orderId }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.tktcqr'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    clear() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.total_wraps{
  display: flex;
  background-color: #f3f2fa;
  margin-bottom: 20px;
  height: 70px;
  overflow: hidden;
  .item_list{
    display: flex;
    width: calc(100% - 200px);
    overflow-y: hidden;
    overflow-x: auto;
  }
  .item{
    padding: 16px 30px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
    .key{
      margin-bottom: 6px;
    }
    .value{
      .price{
        font-size: 16px;
      }
    }
  }
  .first{
    padding: 16px 20px;
    background-color: $primaryColor;
    color:#fff;
    width: 90px;
    font-size: 14px;
  }
  .jesm {
    color:#333;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    font-size: 14px;
  }
}
</style>
